<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
    :dialogWidth="'45%'"
    :topHeight='"15vh"'
  >
    <div class="formarea" v-if="issuccess">
      <el-form
        ref="studentform"
        :model="studentforms"
        :rules="rules"
        size="small"
        label-width="92px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="学员姓名" prop="name">
              <el-input
                v-model="studentforms.name"
                placeholder="请输入学员姓名"
                clearable
                :disabled="true"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="tel">
              <el-input
                v-model="studentforms.tel"
                placeholder="请输入手机号"
                clearable
                :disabled="true"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申领类型" prop="apply_type">
              <el-select
                :disabled='true'
                v-model="studentforms.apply_type"
                placeholder="请选择申领类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in apply_typeOptions"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学习班型" prop="package_id">
              <el-select
              :disabled='true'
                v-model="studentforms.package_id"
                placeholder="请选择学习班型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in learntypeOptions"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班型费用" prop="course_fee">
              <el-input
                :disabled="true"
                v-model="studentforms.course_fee"
                placeholder="请输入班型费用"
                clearable
                :style="{ width: '100%' }"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交费类型" prop="pay_type">
              <el-select
                :disabled="true"
                v-model="studentforms.pay_type"
                placeholder="请选择交费类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in paytypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
               <el-form-item label="报名金额" prop="enroll_cost">
                 <el-input
                   :disabled="true"
                   v-model="studentforms.enroll_cost"
                   placeholder="请输入报名金额"
                   clearable
                   :style="{ width: '100%' }"
                 >
                   <template slot="append">元</template>
                 </el-input>
               </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="优惠金额" prop="discounts">
              <el-input
                :disabled="true"
                v-model="studentforms.discounts"
                placeholder="请输入优惠金额"
                clearable
                :style="{ width: '100%' }"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="费用信息" prop="">
            <ul class="moneylist" v-if="isshowDialog">
              <li>
                <span>标准：{{studentforms.enroll_cost||0}}元</span>
              </li>
              <li>
                <span>已收：{{actual_cost||0}}元</span>
              </li>
              <li>
                <span>应收：{{receivableprice||0}}元</span>
              </li>
              <li>
                <span style="color:rgb(71, 98, 254);">实收：{{officialprice||0}}元</span>
              </li>
              <li>
                <span style="color:red;">欠费：{{arrearage||0}}元</span>
              </li>
            </ul>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="支付方式" prop="pay_typeprice" v-if="isshowDialog">
              <div class="paytypearea">

                <el-input
                 v-for="(item,index) in pay_typeOption"
                 :key="index"
                  v-model="paytypeprice[item.alias]"
                  class="payTypeinput"
                  placeholder="金额"
                  :style="{ width: '20%' }"
                  @input="paypriceinput"
                >
                  <template slot="prepend">{{item.title}}</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交费日期" prop="cost_time">
              <el-date-picker
                v-model="studentforms.cost_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择交费日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"></el-col>
          <el-col :span="12">

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <!-- 报名备注  录入备注 两种 报名备注信息 -->
          </el-col>
        </el-row>
      </el-form>
    </div>
  </commonformdialog>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
//api
import {getRead,repay} from '@/api/student'
import { getSessionStorage } from '@/utils/accessToken'
//utils
import {isObjectvalue} from '@/utils'
export default {
  data() {
    //支付方式验证
    var validatepay = (rule, value, callback) => {
       if(!isObjectvalue(this.paytypeprice)){
         callback(new Error('请输入支付方式'));
       }else{
         callback()
       }
      };
    return {
      //数据是否加载完成
      issuccess:false,
      //应收费用
      enroll_cost:'',
      //实收费用
      actual_cost:'',
      //用户id
      id:'',
      //支付方式
      paytypeprice: {
        wechat: '',
        alipay:'',
        money:'',
        pos:'',
        other:'',
        transfer:''
      },
      studentforms: {
        name:'',
        tel:'',
        apply_type:'',
        package_id:'',
        course_fee:'',
        pay_type:'',
        cost_time:'',
        discounts:'',
        enroll_cost:''
      },
      rules: {
        enroll_cost:[
          {
            required: true,
            message: '请输入报名金额',
            trigger: 'blur',
          },
        ],
        discounts:[
          {
            required: true,
            message: '请输入优惠金额',
            trigger: 'blur',
          },
        ],
        apply_type: [
          {
            required: true,
            message: '请选择申领类型',
            trigger: 'change',
          },
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
          {
            pattern: /^1(3|4|5|7|8|9|6)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        cost_time:[
          {
            required: true,
            message: '请选择交费日期',
            trigger: 'change',
          }
        ],
        package_id: [
          {
            required: true,
            message: '请选择学习班型',
            trigger: 'change',
          },
        ],
        course_fee: [
          {
            required: true,
            message: '请输入班型费用',
            trigger: 'blur',
          },
        ],
        pay_type: [
          {
            required: true,
            message: '请选择交费类型',
            trigger: 'change',
          },
        ],
        pay_fee: [
          {
            required: false,
            message: '请输入已交金额',
            trigger: 'blur',
          },
        ],
        pay_time: [
          {
            required: false,
            message: '请选择交费日期',
            trigger: 'change',
          },
        ],
         pay_typeprice:[
           {
             required: true,
             validator: validatepay,
             trigger: 'change'
          }
        ]
      },
      pay_typeOption:[],
      apply_typeOptions: [],
      learntypeOptions: [],
      paytypeOptions: [
        {
          label: '全款',
          value: 1,
        },
        {
          label: '分期',
          value: 2,
        },
      ],
      bmclOptions: [
        {
          label: '身份证',
          value: 1,
        },
        {
          label: '体检表',
          value: 2,
        },
        {
          label: '指纹录入',
          value: 3,
        },
      ],
    }
  },
  components: {
    commonformdialog,
    uploadimg,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //id
    repairId:Number,
    //弹窗参数
    dialogparams:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  methods: {
    //获取补交信息
    async getrepairData(){
      let params = {
        id:this.dialogparams.id
      }
      let data = await getRead(params)
      if(data.code=='0000'){
        let result = data.data
        let {name,tel,apply_type,package_id,course_fee,pay_type,enroll_cost,actual_cost,discounts} = result
        //应收费用
        this.enroll_cost = enroll_cost
        //实收费用
        this.actual_cost = actual_cost
        this.studentforms = {name,apply_type:apply_type.value,tel,package_id:package_id.value,course_fee:package_id.cost,pay_type:package_id.pay_type,discounts,enroll_cost}
        this.studentforms.cost_time = new Date()
        this.issuccess = true
      }
    },
    //输入支付金额
    paypriceinput(){
      if(!this.studentforms.course_fee){
        this.$message.error('请先选择班型！');
        for(var k in this.paytypeprice){
          this.paytypeprice[k] = ''
        }
        return
      }
      //判断是否意见交清款项
      if(this.arrearage==0){
         this.$message.info('费用已经缴纳完毕！');
      }
    },
    closeDialog() {
      //清空支付方式价格
      for(var k in this.paytypeprice){
          this.paytypeprice[k] = ''
        }
      this.$refs['studentform'].resetFields()
      //重置表单
      this.$emit('closedialog')
    },
    confirmbtn() {
      //提交表单
      this.$refs['studentform'].validate(async (valid) => {
        if (!valid) return
        // TODO 提交表单
        let params = {
          student_id:this.repairId,
          cost_money:this.officialprice,
          cost_time:this.studentforms.cost_time,
          pay_type:this.paytypeprice
        }
        let data = await repay(params)
        if(data.code=='0000'){
          this.$message.success('补交成功！')
            //清空数据
          this.$refs['studentform'].resetFields()
          //编辑和成功
          this.$emit('confirm')
        }

      })
    },
  },
  mounted() {
    //选项数据
    this.schoolOptions = getSessionStorage('Optionsall')['school']
    //申领类型
    this.apply_typeOptions = getSessionStorage('Options')[1]
    //招生渠道数据
    this.channelOptions = getSessionStorage('Options')[14]
    //学习班型
    this.learntypeOptions = getSessionStorage('Optionsall')['package']
    //交费方式
    this.pay_typeOption = getSessionStorage('Options')[15]
    
  },
  computed: {
    //计算应收金额 应收金额-实收费用
    receivableprice() {
      return this.enroll_cost - this.actual_cost
    },
    //计算实收金额
    officialprice(){
      if(Number(this.paytypeprice.wechat) + Number(this.paytypeprice.alipay)+ Number(this.paytypeprice.money)+Number(this.paytypeprice.pos)+Number(this.paytypeprice.other)+Number(this.paytypeprice.transfer)>=this.receivableprice){
        return this.receivableprice
      }else{
        return Number(this.paytypeprice.wechat) + Number(this.paytypeprice.alipay)+ Number(this.paytypeprice.money)+Number(this.paytypeprice.pos)+Number(this.paytypeprice.other)+Number(this.paytypeprice.transfer)
      }
    },
    //计算欠费
    arrearage(){
      if(this.receivableprice - this.officialprice<=0){
        return 0
      }else{
        return this.receivableprice - this.officialprice
      }

    }
  },
  watch:{
    isshowDialog(val){
      if(val){
        //获取补交数据
        this.getrepairData()
      }
      
    }
  }
}
</script>

<style scoped lang='scss'>
.uploadimgarea {
  position: relative;

  .uploaditem {
    position: absolute;
    left: 0;
    top: 0;
  }
}
::v-deep {
  .paytypearea .el-input__inner {
    padding-right: 15px !important;
    width: 81px;
  }
  .el-input-group__append {
    color: #999 !important;
  }
  .el-input-group__prepend {
    background-color: #f5f7fa;
    color: #909399 !important;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    padding: 0 9px !important ;
    width: 1px;
    white-space: nowrap;
  }
}
.moneylist {
  // margin: 5px 0 20px 0;
  display: flex;
  // margin-left: 20px;
  li {
    margin-right: 30px;
  }
}
.payTypeinput {
  padding: 0 !important;
  margin-right: 10px;
  width:40px !important;
  margin-bottom: 20px;
  &:last-child{
    margin-bottom: 0;
  }
}
</style>
